<template>
  <div class="statistics-container">
    <!-- 搜索条件 -->
    <div class="search-wrapper">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="统计时间">
          <el-date-picker
            v-model="searchForm.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            @change="handleSearch" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 统计卡片 -->
    <div class="statistics-cards">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card shadow="hover">
            <template #header>总销售额</template>
            <div class="card-content">
              <h2>¥{{ statistics.totalAmount.toFixed(2) }}</h2>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <template #header>总销售量</template>
            <div class="card-content">
              <h2>{{ statistics.totalNumber }}</h2>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <template #header>促销销售额</template>
            <div class="card-content">
              <h2>¥{{ statistics.promotionAmount.toFixed(2) }}</h2>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 统计表格 -->
    <div class="statistics-table">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column prop="user_name" label="配送员" align="center" />
        <el-table-column prop="total_number" label="销售数量" align="center" />
        <el-table-column label="销售总额" align="center">
          <template #default="scope">
            ¥{{ Number(scope.row.total_amount).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { post } from '@/api/api'

// 搜索表单
const searchForm = reactive({
  timeRange: []
})

// 统计数据
const statistics = reactive({
  totalAmount: 0,
  totalNumber: 0,
  promotionAmount: 0
})

// 表格数据
const tableData = ref([])
const loading = ref(false)

// 获取统计数据
const fetchData = async () => {
  if (!searchForm.timeRange || searchForm.timeRange.length !== 2) {
    ElMessage.warning('请选择时间范围')
    return
  }

  loading.value = true
  try {
    const params = {
      startTime: searchForm.timeRange[0],
      endTime: searchForm.timeRange[1]
    }
    
    const res = await post('/delivery/salesStatistics', params)
    
    if (res.data) {
      // 更新统计数据
      statistics.totalAmount = Number(res.data.totalAmount || 0)
      statistics.totalNumber = Number(res.data.totalNumber || 0)
      statistics.promotionAmount = Number(res.data.promotionAmount || 0)

      // 更新表格数据
      tableData.value = res.data.deliveryStats || []
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
    ElMessage.error('获取统计数据失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  fetchData()
}

// 初始化
onMounted(() => {
  // 设置默认时间范围为当前月
  const now = new Date()
  const start = new Date(now.getFullYear(), now.getMonth(), 1)
  const end = new Date(now.getFullYear(), now.getMonth() + 1, 0)
  searchForm.timeRange = [
    start.toISOString().split('T')[0],
    end.toISOString().split('T')[0]
  ]
  
  fetchData()
})
</script>

<style scoped>
.statistics-container {
  padding: 20px;
}

.search-wrapper {
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

.statistics-cards {
  margin-bottom: 20px;
}

.card-content {
  text-align: center;
  padding: 20px 0;
}

.card-content h2 {
  margin: 0;
  color: #409EFF;
  font-size: 24px;
}

.statistics-table {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
}
</style>
